<script setup lang="ts">
import { computed, ref } from 'vue'
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { message, type UploadProps } from 'ant-design-vue'
import { updateByAdminUsingPost, uploadAvatarAPI } from '@/api/yonghumokuai.ts'

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
})

const visible = computed(() => props.visible)

const form = ref<API.UserVo>({})
const fileList = ref([])
const loading = ref(false)

// 上传文件校验
const beforeUpload = (file: UploadProps['fileList'][number]) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isJpgOrPng) {
    message.error('只能上传 JPG 或 PNG 图片文件!')
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    message.error('文件大小不能超过2MB!')
  }
  return isJpgOrPng && isLt2M
}

// 上传头像
const uploadAvatar = async ({ file }) => {
  loading.value = true
  const formData = new FormData()
  formData.append('file', file)
  const res = await uploadAvatarAPI(formData)
  if (res?.data?.code === 0) {
    form.value.userAvatar = res?.data?.data
  } else {
    message.error(res?.data?.message)
  }
  loading.value = false
}

const emit = defineEmits(['update:visible'])

// 关闭对话框
const closeModel = () => {
  emit('update:visible')
  form.value = {}
}

// 更新信息
const updateUser = async () => {
  const res = await updateByAdminUsingPost({
    ...form.value,
    userId: String(form.value.userId),
  })
  if (res.data.code === 0) {
    message.success('保存成功')
  } else {
    message.error(res.data.message)
  }
}
</script>

<template>
  <div id="userEditPage">
    <a-modal
      v-model:visible="visible"
      title="修改信息"
      ok-text="保存"
      cancel-text="取消"
      centered
      @ok="updateUser"
      @cancel="closeModel"
    >
      <a-form :model="form">
        <a-form-item label="头像">
          <a-upload
            v-model:file-list="fileList"
            name="avatar"
            list-type="picture-card"
            :before-upload="beforeUpload"
            :show-upload-list="false"
            :with-credentials="true"
            :custom-request="uploadAvatar"
            style="margin-left: 20px"
          >
            <a-image v-if="form.userAvatar" :src="form.userAvatar" />
            <div v-else>
              <loading-outlined v-if="loading" />
              <plus-outlined v-else />
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item label="账号">
          <a-input v-model:value="form.userAccount" class="input-style" />
        </a-form-item>
        <a-form-item label="昵称">
          <a-input v-model:value="form.userName" class="input-style" />
        </a-form-item>
        <a-form-item label="简介">
          <a-textarea v-model:value="form.userProfile" class="input-style" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>
#userEditPage {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  overflow: hidden;
}

.input-style {
  width: 80%;
  margin-left: 20px;
}
</style>
